import React, {useEffect} from 'react';
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line';  //折线图是line,饼图改为pie,柱形图改为bar
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';

export default (props) => {
    const {options, style, id, title,titleStyle} = props;
    const x = options.xAxis ? options.xAxis.data.length : 0;
    

    useEffect(() => {
		const myChart = echarts.init(document.getElementById(id));
        myChart.setOption(options);
    }, [x]);

    return (
        <div>
            {
                title && <div className="module-title" style={titleStyle}>{title}</div>
            }
            <div
                key={id}
                style={{
                    ...style,
                    height: style.height || '300px'
                }}
                id={id}
            />
        </div>
    )
}